<template>
	<view class="login">
	<view class="content-box">
		<view class="from-box">
		<view class="from-item">
			<image class="icon" src="/static/image/login/phone.png" mode="aspectFit"></image>
			<input type="number" @input="phoneInput" :value="account" placeholder="请输入手机号" class="input" />
		</view>
		<view class="from-item" v-if="loginType == 'account'">
			<image class="icon" src="/static/image/login/password.png" mode="aspectFit"></image>
			<input type="password" @input="passwordInput" :value="password" placeholder="请输入密码" class="input" />
			<!-- <view class="forget">
				忘记密码
			</view> -->
		</view>
		<view class="from-item" v-if="loginType == 'code'">
			<image class="icon" src="/static/image/login/password.png" mode="aspectFit"></image>
			<input type="text" @input="codeInput" :value="code" placeholder="请输入验证码" class="input" />
			<view class="forget" @click="getcode">
				{{time == 60 ? '获取验证码' : '重新发送（'+time +'）' }}
			</view>
		</view>
		</view>
		<view class="login-button" @click="confirm">
			登录
		</view>
	</view>
	<view class="check-login" @click="loginTypeChange">
		{{loginType == 'code' ? '密码登录' : '验证码登录'}} 
	</view>
	</view>
</template>

<script>
	import * as api from '@/utils/api.js';
	export default {
		props:{
			loginType:{ // 登录类型（account:账号登录，code:验证码登录）
				type:String,
				default:'account'
			}
		},
		data() {
			return {
				codetimer:null,
				time:60,
				account:'',
				code:'',
				password:'',
			}
		},
		methods: {
			phoneInput:function(e){
				this.account = e.target.value;
			},
			codeInput:function(e){
				this.code = e.target.value;
			},
			passwordInput:function(e){
				this.password = e.target.value;
			},
			/**
			 * 登录方式改变触发事件
			 */
			loginTypeChange:function(){
				this.$emit('typeChange');
			},
			getcode:function(){
				let that = this;
				var time = that.time;
				let account = that.account;
				let myreg=/^1[3456789]\d{9}$/;
				if(time == 60){
					if(account == ''){
						uni.showToast({
							title: '请输入手机号',
							icon:'none',
							duration: 2000
						});
						return false;
					}else if(!myreg.test(account)){
						uni.showToast({
							title: '手机号码格式不对',
							icon:'none',
							duration: 2000
						}); 
						return false;
					}
					that.sendCode();
				 that.codetimer = setInterval(function(){
					 time = that.time;
					 if(time > 0){
						time --; 
					 }else{
						 time = 60;
						 clearInterval(that.codetimer);
					 }
					 console.log(time);
					 that.time = time;
				 }, 1000);
				 }
			},
			/**
			 * 发送登陆验证码
			 */
			sendCode:function(){
				let data = {"mobile":this.account,"type":"login"};
				api.verifyCode(data).then();
			},
			/**
			 * 登录触发事件
			 */
			async confirm(){
				let data = {mobile:this.account};
				let loginType = this.loginType;
				let myreg=/^1[3456789]\d{9}$/;
				if(data.mobile == ''){
					uni.showToast({
						title: '请输入手机号',
						icon:'none',
						duration: 2000
					});
					return false;
				}else if(!myreg.test(data.mobile)){
						uni.showToast({
							title: '手机号码格式不对',
							icon:'none',
							duration: 2000
						}); 
						return false;
				}
				if(loginType == 'account'){
					data.password = this.password;
					if(data.password == ''){
						uni.showToast({
							title: '请输入密码',
							icon:'none',
							duration: 2000
						});
						return false;
					}
				}else if(loginType == 'code'){
					data.password = '';
					data.verifyCode = this.code;
					if(data.verifyCode == ''){
						uni.showToast({
							title: '请输入验证码',
							icon:'none',
							duration: 2000
						});
						return false;
					}
				}
				let res = await api.login(data);
				uni.setStorageSync('token',res.data);
				res = await api.user({});
				getApp().globalData.userInfo = res.data;
				uni.switchTab({
					url: '/pages/index/index'
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
.content-box{
			background-color: white;
			border-radius: 10rpx;
			width: calc(100% - 140rpx);
			margin: 0 auto;
			margin-top:60rpx;
			padding:20rpx 20rpx;
			padding-bottom:80rpx;
			position: relative;
			box-sizing: border-box;
			// overflow: hidden;
			.from-box{
				margin:0 20rpx;
			.from-item{
				padding:40rpx 0;
				display: flex;
				border-bottom: 1px solid #efefef;
				.icon{
					width:60rpx;
					height: 60rpx;
				}
				.input{
					flex: 1;
					height: 60rpx;
					line-height: 60rpx;
					margin-left:20rpx;
					font-size: 30rpx;
				}
				.forget{
					line-height: 60rpx;
					font-size: 28rpx;
				}
			}
			}
			.login-button{
				position: absolute;
				width:70%;
				line-height: 100rpx;
				text-align: center;
				background-color: #4269e2;
				color: white;
				border-radius: 50rpx;
				left: 15%;
				bottom:-50rpx;
			}
		}
		.check-login{
			font-size: 28rpx;
			text-align: center;
			color: white;
			margin-top:100rpx;
			text-decoration:underline;
		}
</style>
